<section class="content-header">
  <h1>
    Announcements
    <small>{{ ctrl.announcements.length }} announcements</small>
  </h1>
  <ol class="breadcrumb">
    <li><a ui-sref="manage"><i class="fa fa-wrench"></i> Manage</a></li>
    <li class="active">Announcements</li>
  </ol>
</section>

<section class="content">
  <div class="box box-primary">
    <div class="box-header with-border">
      <h3 class="box-title">All Announcements</h3>
      <div class="box-tools pull-right">
        <a class="btn btn-box-tool" ui-sref="manage_announcement_create">
          <i class="fa fa-plus"></i> Create
        </a>
      </div>
    </div>
    <div class="box-footer" ng-show="ctrl.announcements.length == 0">
      No announcements
    </div>
    <div class="box-body no-padding" ng-show="ctrl.announcements.length > 0">
      <div class="table-responsive">
        <table class="table table-hover table-striped">
          <tbody>
          <tr>
            <th>Title</th>
            <th style="width:150px">{{ 'ui.page.announcement.col.publish' | translate }}</th>
            <th style="width:150px">{{ 'ui.page.announcement.col.update' | translate }}</th>
          </tr>
          <tr ng-repeat="announcement in ctrl.announcements">
            <td><a ui-sref="manage_announcement_edit({id: announcement._id})">{{ announcement.title }}</a></td>
            <td><span data-balloon="{{ announcement.createdAt | date: 'yyyy-MM-dd (EEE) HH:mm:ss Z' }}">{{ announcement.createdAt | amCalendar }}</span></td>
            <td><span data-balloon="{{ announcement.updatedAt | date: 'yyyy-MM-dd (EEE) HH:mm:ss Z' }}">{{ announcement.updatedAt | amCalendar }}</span></td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</section>
